<template>
  <view class="container">
    <scroll-view class="scroll-nav" scroll-x>
      <view class="item" :class="index === navIndex ? 'active' : ''" v-for="(nav,index) in navList" :key="nav.id"
        @click="clickNav(index,nav)">{{nav.classname}}</view>
    </scroll-view>
    <view class="content">
      <view class="row" v-for="item in dataList" :key="item.id" @click="goDetail(item)">
        <newsbox :type="0" :item="item"></newsbox>
      </view>
      <view class="nodata" v-if="!dataList.length">
        <image src="../../static/images/nodata.png" mode="scaleToFill"></image>
      </view>
      <view class="loading">
        <view v-if="loading == 1">数据加载中~~</view>
        <view v-else-if="loading == 2">没有更多了~~</view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    parseTime
  } from '../../utils/dateutil.js'
  export default {
    data() {
      return {
        navIndex: 0,
        navList: [],
        dataList: [],
        param: {
          cid: 50,
          num: 10,
          page: 1
        },
        loading: 0
      }
    },
    methods: {
      clickNav(index, nav) {
        this.navIndex = index
        this.param.cid = nav.id
        this.param.page = 1
        this.dataList = []
        this.loading = 0
        this.getDataList()
      },
      getDataList() {
        uni.request({
          url: `https://ku.qingnian8.com/dataApi/news/newslist.php`,
          data: this.param,
          success: (res) => {
            if (this.dataList.length && res.data.length === 0) {
              this.loading = 2
            }
            this.dataList = [...this.dataList, ...res.data]
          }
        })
      },
      getNavList() {
        uni.request({
          url: "https://ku.qingnian8.com/dataApi/news/navlist.php",
          success: (res) => {
            this.navList = res.data
          }
        })
      },
      goDetail(item) {
        // 添加到缓存
        this.addHistory(item)
        uni.navigateTo({
          url: `/pages/detail/detail?id=${item.id}&cid=${item.classid}`
        })
      },
      addHistory(item) {
        let historyArr = uni.getStorageSync("history") || []
        let index = historyArr.findIndex(it => it.id === item.id)
        console.log(index);
        if (index >= 0) {
          historyArr.splice(index, 1)
        }
        historyArr = [{
          id: item.id,
          classid: item.classid,
          title: item.title,
          picurl: item.picurl,
          lookTime: parseTime(new Date())
        }, ...historyArr]
        console.log(historyArr);
        uni.setStorageSync("history", historyArr)
      }
    },
    onLoad() {
      this.getNavList()
      this.getDataList()
    },
    onReachBottom() {
      if (this.loading == 2) {
        return
      }
      this.param.page++
      this.loading = 1
      this.getDataList()
    },
    onPullDownRefresh() {
      this.param.page = 1
      this.dataList = []
      this.loading = 0
      setTimeout(function() {
        uni.stopPullDownRefresh();
      }, 1000);
      this.getDataList()
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    .scroll-nav {
      height: 100rpx;
      background: #eaeaea;
      white-space: nowrap;
      position: fixed;
      z-index: 99;
      top: var(--window-top);
      left: 0;

      /deep/ ::-webkit-scrollbar {
        width: 4px !important;
        height: 1px !important;
        overflow: auto !important;
        background: transparent !important;
        -webkit-appearance: auto !important;
        display: block;
      }

      .item {
        padding: 0 30rpx;
        text-align: center;
        line-height: 100rpx;
        font-size: 40rpx;
        display: inline-block;

        &.active {
          background: #fff;
        }
      }
    }

    .content {
      padding-top: 130rpx;

      .row {
        padding: 30rpx;
        border-bottom: 1px solid #efefef;
      }

      .nodata {
        display: flex;
        justify-content: center;

        image {
          width: 360rpx;
        }
      }

      .loading {
        text-align: center;
        color: #888;
        font-size: 26rpx;

        view {
          padding: 20rpx 0;
        }
      }
    }
  }
</style>
